<template>
  <lay-ripple v-if="ripple === ''" :trigger="trigger" :style="{ width: fluid ? '100%' : 'auto' }">
    <lay-button
      :type="type"
      :border="border"
      :border-style="dashed"
      :size="size"
      :radius="radius"
      :fluid="fluid"
      :loading="loading"
      @click="onClick"
    >
      <slot></slot>
    </lay-button>
  </lay-ripple>
  <lay-ripple v-else-if="ripple === 'out'" :trigger="trigger" :style="{ width: fluid ? '100%' : 'auto' }">
    <lay-button
      :type="type"
      :border="border"
      :border-style="dashed"
      :size="size"
      :radius="radius"
      :fluid="fluid"
      :loading="loading"
      @click="onClick"
    >
      <slot></slot>
    </lay-button>
  </lay-ripple>
</template>

<script setup>
import { defineProps, defineEmits, ref, watchEffect } from 'vue'
import { useStore } from 'vuex'
const emit = defineEmits(['click'])
defineProps({
  ripple: {
    type: String,
    default() {
      return ''
    }
  },
  trigger: {
    type: String,
    default() {
      return 'mouseenter' //click always mouseenter
    }
  },
  type: {
    type: String, // primary, normal, danger
    default() {
      return 'warm'
    }
  },
  border: {
    type: String // 默认没有边框，所以没写 'green' 'blue' 'orange' 'red'
  },
  dashed: {
    type: String // 默认不是虚线，所以没写
  },
  size: {
    type: String //lg sm xs
  },
  fluid: {
    type: Boolean,
    default() {
      return false
    }
  },
  radius: {
    type: Boolean,
    default() {
      return false
    }
  }
})
const store = useStore()
const loading = ref(false)
watchEffect(() => {
  if (!store.state.loading) {
    loading.value = false
  }
})
function onClick(e) {
  emit('click', e)
  if (store.state.loading) loading.value = true
}
</script>

<style></style>
